<template>
	<view class="container">
		<!-- <u-navbar title="消息" bgColor="transparent"></u-navbar> -->
		<view class="content-box">
			<view class="cell" @click="onJump(index)" v-for="(item,index) in list" :key="index">
				<view class="icon" :style="{'background-color':item.color}">
					<image class="icon-img" :src="item.icon" mode=""></image>
				</view>
				<view class="text">
					<view class="text-box">
						<text class="label">{{item.label}}</text>
						<u-badge max="99" :value="item.badge"></u-badge>
					</view>
					<text class="desc">{{item.desc}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const tx = require('@/static/message/tx.png')
	const pl = require('@/static/message/pl.png')
	const dz = require('@/static/message/dz.png')
	const sc = require('@/static/message/sc.png')
	const xzgz = require('@/static/message/xzgz.png')
	const xtxx = require('@/static/message/xtxx.png')
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState(['isLogin']),
		},
		data() {
			return {
				list: [{
						badge: 0,
						color: '#FFECE1',
						icon: tx,
						label: '提醒',
						desc: '没有新的消息'
					},
					{
						badge: 0,
						color: '#EBF5FF',
						icon: pl,
						label: '评论',
						desc: '暂无评论'
					},
					{
						badge: 0,
						color: '#FFF0F0',
						icon: dz,
						label: '点赞',
						desc: '多发作品获得点赞哦'
					},
					{
						badge: 0,
						color: '#EBF5FF',
						icon: sc,
						label: '收藏',
						desc: '没有新通知'
					},
					{
						badge: 0,
						color: '#EBFAE8',
						icon: xzgz,
						label: '新增关注',
						desc: '多发帖子可以增加粉丝哦'
					},
					{
						badge: 0,
						color: '#EBF5FF',
						icon: xtxx,
						label: '系统消息',
						desc: '没有新通知'
					}
				],
				msgList: []
			}
		},
		onShow() {
			if(this.isLogin){
				this.load_user_msg_total();
			}
			
		},
		methods: {

			load_user_msg_total() {
				this.$Net.get(this.$api.user_msg_total, {}, 1).then(res => {
					let {
						like_new,
						sys_new,
						mind_new,
						comment_new,
						collec_new,
						atten_new,
						atten_total,
						collec_total,
						comment_total,
						like_total,
						mind_total,
						sys_total
					} = res;
					this.list[0].badge = mind_total || 0 //提醒
					if (mind_new) {
						this.list[0].desc = mind_new.content;
					}
					this.list[1].badge = comment_total || 0 //评论
					if (comment_new) {
						this.list[1].desc = comment_new.content;
					}
					this.list[2].badge = like_total || 0 //点赞
					if (like_new) {
						this.list[2].desc = like_new.content;
					}
					this.list[3].badge = collec_total || 0 //收藏
					if (collec_new) {
						this.list[3].desc = collec_new.content;
					}
					this.list[4].badge = atten_total || 0 //新增关注
					if (atten_new) {
						this.list[4].desc = atten_new.content;
					}
					this.list[5].badge = sys_total || 0 //系统消息
					if (sys_new) {
						this.list[5].desc = sys_new.content;
					}
					console.log('this.list',this.list);

				})
			},

			// user_msg_list
			onJump(index) {
				if(!this.isLogin){
					this.$Msg.Toast('请先登录')
					return
				}
				let path = ['/pages/message/msgRemind/msgRemind', '/pages/message/msgReply/msgReply',
					'/pages/message/msgLike/msgLike', '/pages/message/msgCollect/msgCollect',
					'/pages/message/msgFans/msgFans', '/pages/message/msgSys/msgSys'
				][index]
				console.log('------path', path);
				this.$Jump.Open(path)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-box {
		padding-top: 26rpx;

		.cell {
			height: 108rpx;
			line-height: 108rpx;
			margin-bottom: 48rpx;
			display: flex;

			.icon {
				width: 106rpx;
				height: 106rpx;
				border-radius: 32rpx;
				// padding: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;

				.icon-img {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.text {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: end;
				justify-content: center;
				margin-left: 20rpx;

				.text-box {
					display: flex;
					justify-content: space-between;
					width: 100%;
				}

				text {
					height: 40rpx;
					line-height: 40rpx;
					text-align: left;
					display: block;
				}

				.label {
					color: #000;
					font-family: "PingFang SC";
					font-size: 36rpx;
					font-weight: 500;
				}

				.desc {
					color: rgba(0, 0, 0, 0.60);
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;
					margin-top: 12rpx;
					width: 100%;
				}
			}
		}
	}

	::v-deep .u-badge {
		line-height: 15px !important;
	}
</style>
